<template>
  <div class="p-d">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card">
          <div class="m-t"> <el-tree v-if="id" ref="treeRef" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false"
              :highlight-current="true" @node-click="nodeClick" :current-node-key="id">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
              </span>
            </el-tree></div>
        </el-card></el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <div class="m-t">
            <MyProcess :id="id" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MyProcess from './myProcess.vue'
import { getAll } from "@/api/directory"
export default {
  components: {
    MyProcess
  },
  data() {
    return {
      id: null,
      arr: [{
        name: '按类别维度',
        id: 11
      },
      {
        name: '按时间维度',
        id: 22
      }
      ],
      idIndex: '',
      treeData: [],
      nameUse: '按类别维度'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getAll({}).then((res) => {
        this.treeData = res.data || [];
        this.id = this.changeChild(this.treeData[0]);
        console.log('%c [  ]-91', 'font-size:13px; background:pink; color:#bf2c9f;', this.current)

      })
    },
    activeFun(item) {
      this.idIndex = item.id;
      this.nameUse = item.name;
    },
    addFun() {
      this.$refs.addRef.show({ title: "新建维度" })
    },
    changeChild(obj) {
      if (obj.children && obj.children.length > 0) {
        return this.changeChild(obj.children[0]);
      } else {
        return obj.id;
      }
    },
    // 寻找chilredn
    nodeClick(val) {
      this.id = this.changeChild(val)
      console.log('%c [  ]-148', 'font-size:13px; background:pink; color:#bf2c9f;', this.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .picStyle {
    background-color: #fff;
    height: 95vh;
    // margin-top: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .developStyle {
    width: 422px;
    height: 241px;
    background: url('~@/assets/img/develop.png') no-repeat center;
    background-size: 422px 241px;
  }
  .textStyle {
    color: #868b8f;
    text-align: center;
  }
  .borderStyle {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .divStyle {
    text-align: center;
    font-size: 14px;
    padding: 15px;
    cursor: pointer;
  }
  .divStyle:hover {
    background: #f5f4f5 !important;
  }
  .divActive {
    background: #0757b4;
    color: #fff;
    border-radius: 4px;
  }
  :deep(.el-card__body) {
    height: 90vh;
    position: relative;
  }
  .btnStyle {
    position: absolute;
    bottom: 30px;
    background: #0757b4;
    border-color: #0757b4;
    left: 50%;
    transform: translateX(-50%);
  }
</style>